<template>
	<UploadImages ref="upload-images" :max-count="maxCount" :width="width" :height="height" custom-btn
		:file-list="fileList" :auto-upload="autoUpload" :isNativeHead="isNativeHead" :show-progress="false" :show-add="showAdd" :sourceType="sourceType" @openSource="openSource"
		@on-list-change="handleListChange" @on-choose-fail="onChooseFail">
		<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" :style="slotStyle" hover-stay-time="150">
			<u-icon name="plus" :size="addSize" color="#D8D8D8"></u-icon>
			<BottomChoose ref="bottom-choose" @change="sourceTypeChange" />
		</view>
	</UploadImages>
</template>

<script>
	import BottomChoose from '@/components/bottom-choose'
	import upload from '@/utils/upload'
	import UploadImages from '@/components/upload/u-upload'
	import {
		getQiNiuToken
	} from '@/api/common/index.js';
	import {
		UPLOAD_FILE_HOST
	} from '@/utils/config.js';

	export default {
		components: {
			UploadImages,
			BottomChoose
		},
		props: {
			// 给fileList赋初始值用
			list: {
				type: Array,
				default () {
					return []
				},
			},
			// 最大上传数量
			maxCount: {
				type: [String, Number],
				default: 9,
			},
			// 是否自动上传
			autoUpload: {
				type: Boolean,
				default: false,
			},
			// 内部预览图片区域和选择图片按钮的区域宽度
			width: {
				type: [String, Number],
				default: 160,
			},
			// 内部预览图片区域和选择图片按钮的区域高度
			height: {
				type: [String, Number],
				default: 160,
			},
			addSize: {
				type: [String, Number],
				default: 48,
			},
			uploading: {
				type: Boolean,
				default: false
			},
			showAdd: {
				type: Boolean,
				default: true
			},
			isNativeHead:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				fileList: [],
				qiniuToken: '',
				sourceType: ['album', 'camera']
			}
		},
		computed: {
			keyList() {
				let list = []
				if (this.fileList.length) {
					for (var item of this.fileList) {
						if (item.key) {
							list.push(item.key)
						}
					}
				}

				return list
			},
			slotStyle() {
				return ` width:${this.width}rpx;height:${this.height}rpx;`
			}
		},
		watch: {
			list(val) {
				if (val && !this.fileList.length) {
					this.fileList = []
					for (var item of val) {
						this.fileList.push({
							key: item,
							url: item,
						})
					}
				}
			},
		},
		created() {
			this.getQiniuToken()
		},
		methods: {
			openSource() {
				this.$refs['bottom-choose'].open()
			},
			sourceTypeChange(source) {
				this.sourceType = [source]
				this.$nextTick(()=>{					this.$refs['upload-images'].appStratChoose(this.sourceType)				})
			},
			onChooseFail(error) {
				console.log("onChooseFail:", error);
				this.$emit('on-choose-fail');
			},
			filterList(listA, listB) {
				listA = listA || []
				listB = listB || []
				let list = []
				for (var item of listA) {
					for (var obj of listB) {
						if (obj.url == item.url) {
							item.key = obj.key
						}
					}
					list.push(item)
				}
				return list
			},
			handleListChange(lists, name) {
				this.fileList = this.filterList(lists, this.fileList)
				let newImages = this.fileList.filter((item) => {
					return item.key == undefined
				})
				if (newImages && newImages.length > 0) {
					this.$emit('update:uploading', true)
					upload
						.uploads(newImages, this.qiniuToken)
						.then((res) => {
							let list = []
							if (res) {
								for (var item of res) {
									list.push({
										url: item.url,
										key: UPLOAD_FILE_HOST + item.key
									})
								}
							}

							this.fileList = this.filterList(this.fileList, list)
							this.$emit('on-list-change', this.keyList)
							console.log('upload:', this.fileList.length, this.keyList.length)
							this.$emit('update:uploading', this.fileList.length != this.keyList.length)
						})
						.catch((msg) => {
							console.log(msg)
						})
				} else {
					this.$emit('on-list-change', this.keyList)
				}
			},
			getQiniuToken() {
				getQiNiuToken().then((res) => {
					if (res.data) {
						this.qiniuToken = res.data
					}
				})
			},
			selectFile() { // 触发选择图片；不能改文件名，外部要调
				this.$refs['upload-images'].selectFile()
			}
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-add-tips {
		height: 0 !important;
		margin-top: 0 !important;
		overflow: hidden;
	}

	.slot-btn {
		width: 160rpx;
		height: 160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #F6F7FA;
		border-radius: 10rpx;
		margin: 10rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
</style>